<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>平台财务管理</el-breadcrumb-item>
        <el-breadcrumb-item>充值管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-select v-model="filters.accountType" clearable placeholder="币种" style="width: 100px;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.xDataCount" clearable placeholder="天数" style="width: 100px;">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item>
            <div class="block">
              <el-date-picker v-model="filters.satrtDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始日期" default-time="00:00:00">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="block">
              <el-date-picker v-model="filters.endDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束日期" default-time="00:00:00">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12" style="margin-top:10px;">
        <div id="chartLine" style="width:100%; height:400px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="chartPie" style="width:100%; height:400px;"></div>
      </el-col>
      <el-col :span="24" style="margin-top:50px;margin-left: 10px;font-size: 24px;">
        <el-form>
          <el-form-item style="font-size:24px;">
            公式：
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="withDrawCount" placeholder="充值" @keyup.enter.native="handleSearch"/>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              -
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              <el-input v-model="imputationCount" placeholder="归集" @keyup.enter.native="handleSearch"/>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              -
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              <el-input v-model="fee" placeholder="手续费" @keyup.enter.native="handleSearch"/>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              =
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              <el-input v-model="lastCount" placeholder="余额" @keyup.enter.native="handleSearch"/>
            </el-form-item>
          </el-form-item>
        </el-form>
      </el-col>

    </el-col>
  </el-row>
</template>
<script>
  import echarts from 'echarts'
  import util from '../../common/util'
  import API from '../../api/api_finance';
  import moment from 'moment';
  export default{
    data(){
      return {
        filters: {
          txid: '',
          address: '',
          accountType: '',
          type: '',
          chartLine: null,
          chartPie: null,
          satrtDate:'',
          endDate:'',
          xDataCount:null,
        },
        options: [{
          value: '1',
          label: 'USDT'
        }, {
          value: '2',
          label: 'BITCOIN'
        },{
          value: '3',
          label: 'ETH'
        }],
        options2: [{
        value: '7',
        label: '前一周'
      }, {
        value: '15',
        label: '前15天'
      },{
        value: '30',
        label: '前30天'
      }],
        total: 0,
        imputationCount: 0,
        withDrawCount: 0,
        lastCount: 0,
        fee: 0,
        xData:[],
        yData:[],
        sData:[],
        zData:[],
        kData:[],
        loading: false
      }
    },
    methods: {
      handleSearch(){
        this.total = 0;
        this.page = 1;
        this.search();
        this.drawLine(this.withDrawCount,this.imputationCount);
        this.drawChartLine(this.yData,this.sData,this.zData,this.kData,this.filters.xDataCount);
      },
      search(){
        let that = this;
        let params = {
          coinType : this.filters.accountType,
          startTime : this.filters.satrtDate,
          endTime : this.filters.endDate,
          dataCount: this.filters.xDataCount
        };
        that.loading = true;
        API.getWalletRecharge(params).then(function (result) {
          that.loading = false;
          if (result.code===200) {
            that.drawLine(result.data.withdrawTotalAmount,result.data.impatationTotalAmount);
            that.imputationCount=result.data.impatationTotalAmount;
            that.withDrawCount=result.data.withdrawTotalAmount;
            that.lastCount=result.data.withdrawTotalAmount - result.data.impatationTotalAmount
            that.drawChartLine(result.data.m.yData,result.data.m.sData,result.data.m.zData,result.data.m.kData,that.filters.xDataCount);
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          console.log(error);
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
      drawLine:function (withDrawCount,imputationCount){
        this.chartPie = echarts.init(document.getElementById('chartPie'));
        this.chartPie.setOption({
          title: {
            text: '充值余额',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['充值', '归集']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                { value: withDrawCount, name: '充值' },
                { value: imputationCount, name: '归集' },
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      },
      drawChartLine:function (ydata,sdata,zdata,kdata,dataCount){
        this.chartLine = echarts.init(document.getElementById('chartLine'));
        this.chartLine.setOption({
          title: {
            text: '走势图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['充值', '归集', '余额','手续费']
          },
         /* axisPointer: {
            link: {xAxisIndex: 'all'}
          },
          dataZoom: [
            {
              type: 'inside',
              realtime: true,
              start: 30,
              end: 70,
              xAxisIndex: [0, 1]
            }
          ],*/
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: (function (){
              var now = new Date();
              var res = [];
              var len = dataCount;
              if(dataCount===null){
                len=7;
              }
              while (len--) {
                res.unshift(now.toLocaleDateString().replace(/^\D*/,''));
                now = new Date(now - 86399000);
              }
              return res;
            })()
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '充值',
              type: 'line',
              stack: '总量',
             // xAxisIndex: 1,
              data:  ydata
            },
            {
              name: '归集',
              type: 'line',
              stack: '总量',
             // xAxisIndex: 1,
              data: sdata
            },
            {
              name: '余额',
              type: 'line',
              stack: '总量',
             // xAxisIndex: 1,
              data: zdata
            },
            {
              name: '手续费',
              type: 'line',
              stack: '总量',
            //  xAxisIndex: 1,
              data: kdata
            }
          ]
        });
      },
    },

    mounted() {
      this.handleSearch();
    }
  }
</script>

<style>
  .demo-table-expand label {
    font-weight: bold;
  }
</style>
